<template>
<div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
    <el-form-item label="生产计划id" prop="producePlanId">
        <el-input
        v-model="queryParams.producePlanId"
        placeholder="请输入生产计划id"
        clearable
        @keyup.enter.native="handleQuery"
        />
    </el-form-item>
    <el-form-item label="出厂计划id" prop="produceOutFactoryId">
        <el-input
        v-model="queryParams.produceOutFactoryId"
        placeholder="请输入出厂计划id"
        clearable
        @keyup.enter.native="handleQuery"
        />
    </el-form-item>
    <el-form-item label="boxId" prop="boxIds">
        <el-input
        v-model="queryParams.boxIds"
        placeholder="请输入boxid,英文逗号分开"
        clearable
        @keyup.enter.native="handleQuery"
        />
    </el-form-item>
    <el-form-item label="产品缩写" prop="productAddr">
        <el-input
        v-model="queryParams.productAddr"
        placeholder="请输入产品缩写"
        clearable
        @keyup.enter.native="handleQuery"
        />
    </el-form-item>
    <el-form-item label="设备sn号" prop="snCode">
        <el-input
        v-model="queryParams.snCode"
        placeholder="请输入设备sn号"
        clearable
        @keyup.enter.native="handleQuery"
        />
    </el-form-item>
    <el-form-item label="设备imei" prop="imei">
        <el-input
        v-model="queryParams.imei"
        placeholder="请输入设备imei"
        clearable
        @keyup.enter.native="handleQuery"
        />
    </el-form-item>
    <el-form-item label="是否被使用" prop="isUsed">
        <el-select 
          clearable=""
          v-model="queryParams.isUsed" 
          filterable 
          placeholder="请选择是否被使用"
          >
          <el-option
            v-for="item in isUsedList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="使用时间起止:"  label-width="110px">
        <el-date-picker
            v-model='queryParams.chooseUsedTime'
            type='datetimerange'
            :picker-options='pickerOptions'
            range-separator='至'
            start-placeholder='开始日期'
            end-placeholder='结束日期'
            align='right'
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change='changeTime'
            clearable>
        </el-date-picker>
    </el-form-item>
    <el-form-item label="打包时间起止:" label-width="110px">
        <el-date-picker
            v-model='queryParams.choosePackedTime'
            type='datetimerange'
            :picker-options='pickerOptions'
            range-separator='至'
            start-placeholder='开始日期'
            end-placeholder='结束日期'
            align='right'
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change='changeTime'
            clearable>
        </el-date-picker>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
    </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
    <!-- <el-col :span="1.5">
        <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
        v-hasPermi="['produce:product-sn-info:add']"
        >新增</el-button>
    </el-col> -->
    <!-- <el-col :span="1.5">
        <el-button
        type="success"
        plain
        icon="el-icon-edit"
        size="mini"
        :disabled="single"
        @click="handleUpdate"
        v-hasPermi="['produce:product-sn-info:edit']"
        >修改</el-button>
    </el-col> -->
    <el-col :span="1.5">
        <el-button
        type="danger"
        plain
        icon="el-icon-delete"
        size="mini"
        :disabled="multiple"
        @click="handleDelete"
        v-hasPermi="['produce:product-sn-info:removed']"
        >删除</el-button>
    </el-col>
    <el-col :span="1.5">
      <el-upload
        action="/"
        :on-change="excelUploadImei"
        :auto-upload="false"
        :show-file-list="false"
        accept=".xls, .xlsx"
      >
      <el-button
        type="danger"
        plain
        icon="el-icon-delete"
        size="mini"
        v-hasPermi="['produce:product-sn-info:removed']"
        >导入Excel根据imei批量注销</el-button>
      </el-upload>
    </el-col>
    <el-col :span="1.5">
      <el-upload
        action="/"
        :on-change="excelUploadSn"
        :auto-upload="false"
        :show-file-list="false"
        accept=".xls, .xlsx"
      >
      <el-button
        type="danger"
        plain
        icon="el-icon-delete"
        size="mini"
        v-hasPermi="['produce:product-sn-info:removed']"
        >导入Excel根据sn批量注销</el-button>
      </el-upload>
    </el-col>
    <el-col :span="1.5">
        <ExportExcel :list="exportList" :tHeader="tHeader" :tValue="tValue" filename="导出列表">excel导出</ExportExcel>
        <!-- <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
        v-hasPermi="['produce:product-sn-info:export']"
        >导出</el-button> -->
    </el-col>
    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table ref="snTable" v-loading="loading" :data="ProductSnInfoList" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column label="id" align="center" prop="id" />
    <el-table-column label="生产计划id" align="center" prop="producePlanId" />
    <el-table-column label="出厂计划id" align="center" prop="produceOutFactoryId" />
    <el-table-column label="boxId" align="center" prop="boxId" />
    <el-table-column label="设备sn号" align="center" prop="snCode" />
    <el-table-column label="设备编号" align="center" prop="deviceNo" />
    <el-table-column label="imei" align="center" prop="imei" />
    <el-table-column label="mac" align="center" prop="mac" />
    <el-table-column label="iccid" align="center" prop="iccid" />
    <el-table-column label="cpuId" align="center" prop="cpuId" />
    <el-table-column label="打包时间" align="center" prop="packTime" >
        <template slot-scope="scope">
            <div>{{ scope.row.packTime ? formateTime(scope.row.packTime) : '' }}</div>
            
        </template>
    </el-table-column>
    <el-table-column label="是否被使用" align="center" prop="isUsed" >
        <template slot-scope="scope">
            {{ scope.row.isUsed === 0 ? '未使用' : '已使用' }}
        </template>
    </el-table-column>
    <el-table-column label="使用时间" align="center" prop="usedTime" >
        <template slot-scope="scope">
            <div>{{ scope.row.usedTime ? formateTime(scope.row.usedTime) : '' }}</div>
        </template>
    </el-table-column>
    <el-table-column label="备注" align="center" prop="remark" />
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
        <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDeatail(scope.row)"
            v-hasPermi="['produce:product-sn-info:edit']"
        >详情</el-button>
        <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['produce:product-sn-info:edit']"
        >修改</el-button>
        <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['produce:product-sn-info:removed']"
        >删除</el-button>
        </template>
    </el-table-column>
    </el-table>
    
    <pagination
    v-show="total>0"
    :total="total"
    :page.sync="queryParams.pageNum"
    :limit.sync="queryParams.pageSize"
    :page-sizes="[10, 20, 50, 100,200,500,1000,2000,3000]"
    @pagination="getList"
    />

    <!-- 添加或修改产品SN详情对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="90px">
        <el-form-item label="生产计划id" prop="producePlanId">
        <el-input v-model="form.producePlanId" placeholder="请输入生产计划id" />
        </el-form-item>
        <el-form-item label="出厂计划id" prop="produceOutFactoryId">
        <el-input v-model="form.produceOutFactoryId" placeholder="请输入出厂计划id" />
        </el-form-item>
        <el-form-item label="设备sn号" prop="snCode">
        <el-input v-model="form.snCode" placeholder="请输入设备sn号" />
        </el-form-item>
        <el-form-item label="设备编号" prop="deviceNo">
        <el-input v-model="form.deviceNo" placeholder="请输入设备deviceNo" />
        </el-form-item>
        <el-form-item label="设备imei号" prop="imei">
        <el-input v-model="form.imei" placeholder="请输入设备imei号" />
        </el-form-item>
        <el-form-item label="accid" prop="accid">
        <el-input v-model="form.accid" placeholder="请输入accid" />
        </el-form-item>
        <el-form-item label="是否被使用" prop="isUsed">
        <!-- <el-input v-model="form.isUsed" placeholder="请输入是否被使用" /> -->
        <el-select 
          clearable=""
          v-model="form.isUsed" 
          filterable 
          placeholder="请选择是否被使用"
          >
          <el-option
            v-for="item in isUsedList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
    </div>
    </el-dialog>

    <!-- 查看产品SN详情对话框 -->
    <el-dialog title="产品SN详情" :visible.sync="snDetailDialog" width="1500px" append-to-body>
        <div style = "width: 100%;height: 700px">
            <!-- <div class="snBox">
                <div class = "snPart" style="text-decoration: underline red;">{{ this.snDetailData.producePlan.productLineCode }}</div>
                <div class = "snPart" style="text-decoration: underline orange;">{{ this.snDetailData.producePlan.productAddr }}</div>
                <div class = "snPart" style="text-decoration: underline teal;">{{ this.snDetailData.producePlan.hardwareCode }}</div>
                <div class = "snPart" style="text-decoration: underline olive;">{{ this.snDetailData.producePlan.softwareCode }}</div>
                <div class = "snPart" style="text-decoration: underline maroon;">{{ this.snDetailData.producePlan.expand1 }}</div>
                <div class = "snPart" style="text-decoration: underline blue;">{{ this.snDetailData.producePlan.expand2 }}</div>
                <div class = "snPart" style="text-decoration: underline purple;">{{ this.snCode.slice(-12,-4) }}</div>
                <div class = "snPart" style="text-decoration: underline black;">{{ this.snCode.slice(-4) }}</div>
            </div> -->

            <div class="snDetail">
                <div class="cardTitle">SN字典</div>
                <el-card class="card-box" style="margin-top: 10px;">

                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">①生产线体代码：</div>
                        <div class = "snPartValue" style = "color:red">{{ this.snDetailData.producePlan.productLineCode || '无'}}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">②产品型号代码：</div>
                        <div class = "snPartValue" style = "color:orange">{{ this.snDetailData.producePlan.productAddr || '无'}}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">③整机BOM版本：</div>
                        <div class = "snPartValue" style = "color:teal">{{ this.snDetailData.producePlan.hardwareCode || '无'}}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">④软件版本：</div>
                        <div class = "snPartValue" style = "color:olive">{{ this.snDetailData.producePlan.softwareCode || '无'}}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">⑤PCBA芯片组和代码：</div>
                        <div class = "snPartValue" style = "color:maroon">{{ this.snDetailData.producePlan.expand1 || '无'}}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">⑥5系硬件是否改制：</div>
                        <div class = "snPartValue" style = "color:blue">{{ this.snDetailData.producePlan.expand2 || '无'}}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">⑦年月日：</div>
                        <div class = "snPartValue" style = "color:purple">{{ this.snCode.slice(-12,-4) || '无'}}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">⑧流水号：</div>
                        <div class = "snPartValue" style = "color:black">{{ this.snCode.slice(-4) || '无'}}</div>
                    </div>
                </el-card>
            </div>

            <div class="snDetail" style="margin-left: 5%;height: 35%;width: 23%;">
                <div class="cardTitle">产品信息</div>
                <el-card class="card-box" style="margin-top: 10px;">
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">产品名称：</div>
                        <div class = "snPartValue" style = "color:red">{{ this.snDetailData.productName || '无'}}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">产品代码：</div>
                        <div class = "snPartValue" style = "color:orange">{{ this.snDetailData.productCode || '无'}}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">产品缩写：</div>
                        <div class = "snPartValue" style = "color:teal">{{ this.snDetailData.productAbbr  || '无'}}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">CPU型号：</div>
                        <div class = "snPartValue" style = "color:teal">{{ this.snDetailData.cpuModel  || '无'}}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">产品类型代码：</div>
                        <div class = "snPartValue" style = "color:teal">{{ this.snDetailData.productTypeCode || '无'  }}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">产品类型名称：</div>
                        <div class = "snPartValue" style = "color:teal">{{ this.snDetailData.productTypeName || '无'  }}</div>
                    </div>
                </el-card>
            </div>
            <div class="snDetail" style="margin-left: 5%;height: 15%;">
                <div class="cardTitle">产品打包信息</div>
                <el-card class="card-box" style="margin-top: 10px;">
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">产品打包唯一id：</div>
                        <div class = "snPartValue" style = "color:red">{{ this.snDetailData.productPack.boxId || '无'}}</div>
                    </div>
                </el-card>
            </div>
            <div class="snDetail" style="margin-left: 5%;">
               <div class="cardTitle">产品生产计划</div>
               <el-card class="card-box" style="margin-top: 10px;">
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">id：</div>
                        <div class = "snPartValue" style = "color:red">{{ this.snDetailData.producePlan.id || '无'  }}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">订单号：</div>
                        <div class = "snPartValue" style = "color:orange">{{ this.snDetailData.producePlan.orderNo || '无'  }}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">物料号：</div>
                        <div class = "snPartValue" style = "color:green">{{ this.snDetailData.producePlan.materialLot || '无'  }}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">生产总数：</div>
                        <div class = "snPartValue" style = "color:teal">{{ this.snDetailData.producePlan.produceTotal  || '无'}}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">计划生产日期：</div>
                        <div class = "snPartValue" style = "color:olive">{{ this.snDetailData.producePlan.planProduceDate || '无'}}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">生产线体代码：</div>
                        <div class = "snPartValue" style = "color:maroon">{{ this.snDetailData.producePlan.productLineCode  || '无'}}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">软件代码：</div>
                        <div class = "snPartValue" style = "color:blue">{{ this.snDetailData.producePlan.softwareCode || '无'}}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">硬件代码：</div>
                        <div class = "snPartValue" style = "color:purple">{{ this.snDetailData.producePlan.hardwareCode || '无' }}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">拓展1：</div>
                        <div class = "snPartValue" style = "color:black">{{ this.snDetailData.producePlan.expand1 || '无' }}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle" style="margin-left: 5px;">拓展2：</div>
                        <div class = "snPartValue" style = "color:black">{{ this.snDetailData.producePlan.expand2 || '无' }}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">计划生产日期，生产数：</div>
                        <div class = "snPartValue" style = "color:olive">{{ this.snDetailData.producePlan.planProduceCount || '无'  }}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">备注：</div>
                        <div class = "snPartValue" style = "color:gray">{{ this.snDetailData.producePlan.remark || '无' }}</div>
                    </div>
                </el-card>   
            </div>
            
            <div class="snDetail" style="height: 30%;margin-top: 4%;">
                <div class="cardTitle">产品节点信息</div>
                <el-card class="card-box" style="margin-top: 10px;">
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">节点：</div>
                        <div class = "snPartValue" style = "color:red">{{ this.snDetailData.produceNode.node === 1 ? '加密' :(this.snDetailData.produceNode.node === 2 ? '测试' : (this.snDetailData.produceNode.node === 3 ? '包装' : (this.snDetailData.produceNode.node === 4 ? '质检' : (this.snDetailData.produceNode.node === 5 ? '出货' : '-')))) }}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">可操作岗位：</div>
                        <div class = "snPartValue" style = "color:orange">{{ this.snDetailData.produceNode.operationPost || '' }}</div>
                    </div>
                </el-card>
            </div>

            <div class="snDetail" style="margin-left: 5%;width: 23%;">
               <div class="cardTitle">产品mac信息</div>
               <el-card class="card-box" style="margin-top: 10px;">
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">id：</div>
                        <div class = "snPartValue" style = "color:red">{{ this.snDetailData.productMacInfo.id || '无'  }}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">状态：</div>
                        <div class = "snPartValue" style = "color:orange">{{ this.snDetailData.productMacInfo.isUsed === 2 ? '无':(this.snDetailData.productMacInfo.isUsed === 0 ? '未使用' : '已使用')  }}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">mac地址：</div>
                        <div class = "snPartValue" style = "color:teal">{{ this.snDetailData.productMacInfo.macAddress  || '无'}}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">MAC地址前缀：</div>
                        <div class = "snPartValue" style = "color:orange">{{ this.snDetailData.productMacInfo.macAddressPrefix || '无'}}</div>
                    </div>
                </el-card>   
            </div>
            <div class="snDetail" style="margin-left: 5%;height: 35%;">
               <div class="cardTitle">产品测试信息</div>
               <el-card class="card-box" style="margin-top: 10px;">
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">id：</div>
                        <div class = "snPartValue" style = "color:red">{{ this.snDetailData.testInfos.id || '无'  }}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">测试内容：</div>
                        <div class = "snPartValue" style = "color:teal">{{ this.snDetailData.testInfos.testContent  || '无'}}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">测试项：</div>
                        <div class = "snPartValue" style = "color:teal">{{ this.snDetailData.testInfos.testItem  || '无'}}</div>
                    </div>
                    <div style = "width: 100%;height: 40px;line-height: 40px;">
                        <div class = "snPartTitle">测试结果：</div>
                        <div class = "snPartValue" style = "color:orange">{{ this.snDetailData.testInfos.testResult === 2 ? '无':(this.snDetailData.productMacInfo.testResult === 0 ? '通过' : '不通过')  }}</div>
                    </div>
                </el-card>   
            </div>
        </div>
       
    </el-dialog>
</div>
</template>

<script>
import { listProductSnInfo, getProductSnInfo, removedProductSnInfo, addProductSnInfo, updateProductSnInfo, getProductInfoBySn, batchLogOffBySn, batchLogOffByImei } from "@/api/produce/product-sn-info";
import ExportExcel from '../../../components/ExcelUtils/Export2Excel.vue'
import * as XLSX from 'xlsx'
export default {
name: "Product-sn-info",
components: {
    ExportExcel
},
data() {
    return {
    // 导入的excel文件
    excelData:'',
    pickerOptions: {
    shortcuts: [{
        text: '最近一周',
        onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        picker.$emit('pick', [start, end]);
        }
    }, {
        text: '最近一个月',
        onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        picker.$emit('pick', [start, end]);
        }
    }, {
        text: '最近三个月',
        onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        picker.$emit('pick', [start, end]);
        }
    }]
    },
    // 导出抬头字段
    tHeader: ['平台记录id','生产计划id','出厂计划id','设备sn号','设备编号','imei','mac','iccid','是否被使用','boxId','备注'],
    tValue: ['id','producePlanId','produceOutFactoryId','snCode','deviceNo','imei','mac','iccid','isUsed','boxId','remark'],
    // 选中的要导出的数据
    exportList:[],
    // 当前选中行的sn
    snCode:'',
    // sn详情弹框
    snDetailDialog: false,
    // sn详情数据集合
    snDetailData: {
        productMacInfo : {
            id : '',
            isUsed : 2,
            macAddress : '',
            macAddressPrefix : ''
        },
        producePlan : {
            id:'',
            orderNo:'',
            materialLot:'',
            planProduceCount:'',
            planProduceDate:'',
            produceTotal:'',
            productAddr:'',
            productLineCode:'',
            softwareCode:'',
            hardwareCode:''
        },
        produceNode : {
            node:6,
            operationPost:''
        },
        productPack : {
            boxId:''
        },
        testInfos : {
            id:'',
            testContent:'',
            testItem:'',
            testResult:2
        }
    },
    // 遮罩层
    loading: true,
    // 选中数组
    ids: [],
    // 非单个禁用
    single: true,
    // 非多个禁用
    multiple: true,
    // 显示搜索条件
    showSearch: true,
    // 总条数
    total: 0,
    // 产品SN详情表格数据
    ProductSnInfoList: [],
    // 是否使用
    isUsedList:[
        {
            value:0,
            label:'未使用'
        },
        {
            value:1,
            label:'已使用'
        }
    ],
    // 弹出层标题
    title: "",
    // 是否显示弹出层
    open: false,
    // 查询参数
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        producePlanId: null,
        snCode: null,
        isUsed: null,
        removed: null,
        chooseUsedTime:'',
        productTypeCode:'',
        productAddr:'',
        choosePackedTime:'',
        usedTimeStart:'',
        usedTimeEnd:'',
        packTimeStart:'',
        packTimeEnd:'',
        boxIdList:[],
        boxIds:'',
        imei:'',
        orderByColumn:'id',
        isAsc:'desc'
    },
    // 表单参数
    form: {},
    // 表单校验
    rules: {
        producePlanId: [
        { required: true, message: "生产计划id不能为空", trigger: "blur" }
        ],
        snCode: [
        { required: true, message: "设备sn号不能为空", trigger: "blur" }
        ],
    }
    };
},
created() {
    this.getList();
},
methods: {
    /** 导入excel根据imei批量注销 */
    excelUploadImei(file,fileList){
      this.excelData = ''
      this.$confirm("此操作将根据imei批量注销，是否确认?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.excelData = file; // 保存当前选择文件
          this.readExcel('imei'); // 读取excel中的snCodeList进行测试项批量删除
        })
        .catch(() => {
        });
    },
    /** 导入excel根据sn批量注销 */
    excelUploadSn(file,fileList){
      this.excelData = ''
      this.$confirm("此操作将根据sn批量注销，是否确认?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.excelData = file; // 保存当前选择文件
          this.readExcel('sn'); // 读取excel中的snCodeList进行测试项批量删除
        })
        .catch(() => {

        });
    },
    /** 读取excel数据 */
    readExcel(type){
      let that = this;
      const files = that.excelData;
      if (!files) {
        this.$confirm("读取excel文件数据失败，请先上传文件！", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
        // 如果没有文件 - 当然也可以提醒用户弹个警告框 但是基本没有这种情况的出现
        return false;
      } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
        // 文件格式的判断
        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }
      const fileReader = new FileReader(files);
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          let workbook = XLSX.read(data, {
            type: "binary",
          });

          // 取第一张表
          const wsname = workbook.SheetNames[0];
          // 生成json表格内容
          let ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
          // 循环 ws 取得其中的数据 
          // 把 ws 打印出来 就可以看得很清楚了 之后就进行自己想要的操作就可以了
          // 没有一样的代码 没有一样的需求

          if(ws.length>0){
            if(type=='sn'){
              var temporary = [];
              for (let i = 0; i < ws.length; i++) {
                if(ws[i].sn){
                  temporary.push(ws[i].sn)
                }
              }
              if(temporary.length === 0){
                this.$message.warning("未读取到sn，请检查excel")
                return
              }
              this.$notify({
                title: '提示',
                message: '批量注销中,请稍后…',
                offset: 700,
                duration: 0
              });
              const formData = new FormData()
              formData.append("snCodeList", temporary)
              batchLogOffBySn(formData)
              .then((res) => {
                if(res.code === 200){
                  this.$message.success("删除成功,详情："+res.msg)
                }else{
                  this.$message.warning("删除失败，原因："+res.msg)
                }
                this.$notify.closeAll();//去掉交互框
              })
              .catch((err) => {
                this.$message.error('通过sn批量删除测试项-接口返回：'+err.message)
              })
            }else{
              var temporary = [];
              for (let i = 0; i < ws.length; i++) {
                if(ws[i].imei){
                  temporary.push(ws[i].imei)
                }
              }
              if(temporary.length === 0){
                this.$message.warning("未读取到imei，请检查excel")
                return
              }
              this.$notify({
                title: '提示',
                message: '批量注销中,请稍后…',
                offset: 700,
                duration: 0
              });
              const formData = new FormData()
              formData.append("imeiList", temporary)
              batchLogOffByImei(formData)
              .then((res) => {
                if(res.code === 200){
                  this.$message.success("删除成功,详情："+res.msg)
                }else{
                  this.$message.warning("删除失败，原因："+res.msg)
                }
                this.$notify.closeAll();//去掉交互框
              })
              .catch((err) => {
                this.$message.error('通过imei批量删除测试项-接口返回'+err.message)
              })
            }

          }else{
              this.$message({
                type: "info",
                message: "获取的列表为空，请检查表格是否有数据!",
              });
          }

        } catch (e) {
          return false;
        }
      };
      // 如果为原生 input 则应是 files[0]
      fileReader.readAsBinaryString(files.raw);
    },
    /** 时间戳转换 */
    formateTime(time) {
        //将时间戳格式转换成年月日时分秒
        var date = new Date(time);
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
    
        var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
        var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
        var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
        var strDate = Y + M + D + h + m + s;
        return strDate
    },
    /** 选择时间 */
    changeTime(){
      console.log(this.queryParams.chooseUsedTime)
      console.log(this.queryParams.choosePackedTime)
    },
    /** 查询产品SN详情列表 */
    getList() {
    this.loading = true;
    if(this.queryParams.boxIds){
        this.queryParams.boxIdList = this.queryParams.boxIds.split(',')
    }else{
        this.queryParams.boxIdList = []
    }
    if(this.queryParams.chooseUsedTime === null){
        this.queryParams.chooseUsedTime = ''
        this.queryParams.usedTimeStart = ''
        this.queryParams.usedTimeEnd  = ''
    }
    if(this.queryParams.choosePackedTime === null){
        this.queryParams.choosePackedTime = ''
        this.queryParams.packTimeStart = ''
        this.queryParams.packTimeEnd  = ''
    }
    if(this.queryParams.chooseUsedTime[0]){
        this.queryParams.usedTimeStart = this.queryParams.chooseUsedTime[0]
    }
    if(this.queryParams.chooseUsedTime[1]){
        this.queryParams.usedTimeEnd = this.queryParams.chooseUsedTime[1]
    }
    if(this.queryParams.choosePackedTime[0]){
        this.queryParams.packTimeStart = this.queryParams.choosePackedTime[0]
    }
    if(this.queryParams.choosePackedTime[1]){
        this.queryParams.packTimeEnd = this.queryParams.choosePackedTime[1]
    }
    console.log(this.queryParams.boxIdList)
    const params={
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        producePlanId: this.queryParams.producePlanId,
        produceOutFactoryId: this.queryParams.produceOutFactoryId,
        snCode: this.queryParams.snCode,
        isUsed: this.queryParams.isUsed,
        removed: this.queryParams.removed,
        usedTimeStart:this.queryParams.usedTimeStart,
        usedTimeEnd:this.queryParams.usedTimeEnd,
        packTimeStart:this.queryParams.packTimeStart,
        packTimeEnd:this.queryParams.packTimeEnd,
        boxIdList:this.queryParams.boxIdList,
        imei:this.queryParams.imei,
        orderByColumn:'id',
        isAsc:'desc',
        productAddr:this.queryParams.productAddr,

    }
    listProductSnInfo(params).then(response => {
        this.ProductSnInfoList = response.rows;
        this.total = response.total;
        this.loading = false;
    });
    },
    // 取消按钮
    cancel() {
    this.open = false;
    this.reset();
    },
    // 表单重置
    reset() {
    this.form = {
        id: null,
        producePlanId: null,
        produceOutFactoryId: null,
        snCode: null,
        isUsed: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        removed: null
    };
    this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
    this.queryParams.pageNum = 1;
    this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
    this.resetForm("queryForm");
    this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
    this.exportList = selection
    this.ids = selection.map(item => item.id)
    this.single = selection.length!==1
    this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
    this.reset();
    this.open = true;
    this.title = "添加产品SN详情";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
    this.reset();
    const id = row.id || this.ids
    getProductSnInfo(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改产品SN详情";
    });
    },
    /** 详情按钮操作 */
    handleDeatail(row) {
        let params = {
            snCode:row.snCode
        }
        this.snCode = row.snCode
        getProductInfoBySn(params).then((res) =>{
            if(res.code === 200){
                //打开弹框
                this.snDetailDialog = true
                //赋值
                this.snDetailData = res.data
                if(this.snDetailData.productMacInfo === null){
                    this.snDetailData.productMacInfo = {
                        id : '',
                        isUsed : 2,
                        macAddress : '',
                        macAddressPrefix : ''
                    }
                }
                if(this.snDetailData.producePlan === null){
                    this.snDetailData.producePlan = {
                        id:'',
                        orderNo:'',
                        materialLot:'',
                        planProduceCount:'',
                        planProduceDate:'',
                        produceTotal:'',
                        productAddr:'',
                        productLineCode:'',
                        softwareCode:'',
                        hardwareCode:''
                    }
                }
                if(this.snDetailData.produceNode === null){
                    this.snDetailData.produceNode = {
                        node:6,
                        operationPost:''
                    }
                }
                if(this.snDetailData.productPack === null){
                    this.snDetailData.productPack = {
                        boxId:''
                    }
                }
                if(this.snDetailData.testInfos === null){
                    this.snDetailData.testInfos = {
                        id:'',
                        testContent:'',
                        testItem:'',
                        testResult:2
                    }
                }
                
                this.$forceUpdate()
                console.log("sn详情为",this.snDetailData)
            }
        })
    },
    /** 提交按钮 */
    submitForm() {
    this.$refs["form"].validate(valid => {
        if (valid) {
        if (this.form.id != null) {
            updateProductSnInfo(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
            });
        } else {
            addProductSnInfo(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            this.getList();
            });
        }
        }
    });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
    const ids = row.id || this.ids;
    this.$modal.confirm('是否确认删除产品SN详情编号为"' + ids + '"的数据项？').then(function() {
        // 修改为逻辑删除
        return removedProductSnInfo(ids);
    }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
    }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
    this.download('produce/product-sn-info/export', {
        ...this.queryParams
    }, `product-sn-info_${new Date().getTime()}.xlsx`)
    }
}
};
</script>
<style lang="scss">
.cardTitle{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color:#0eb196;
}
.snDetail{
    margin-bottom: 10px;
    margin-top: 10px;
    width: 19%;
    height: 50%;
    float: left;
}
.detailBox{
    margin-bottom: 10px;
    margin-top: 10px;
    width: 22%;
    margin-left: 2.4%;
    height: 40%;
    border:1px solid red;
    float: left;
}
.snBox{
    font-size: 22px;
    line-height: 70px;
    height: 10%;
    margin-left: 30%;
    margin-right: 30%;
    width: 40%;
    text-align: center;
    float: left;
    // border:1px solid black;
}
.snPart{
    margin-left: 5%;
    // margin-left: 10px;
    float: left;
}
.detailBoxTitle{
    height: 10%;
    width: 100%;
    text-align: center;
    font-size: 20px;
}
.detailBoxValue{
    height: 10%;
    width: 100%;
    text-align: center;
    font-size: 18px;
}
.snPartTitle{
    // width: 30%;
    height: 100%;
    float: left;
}
.snPartValue{
    // margin-left: 10px;
    // width: 70%;
    height: 100%;
    float: left;

}


</style>
